<template>
	<mescroll-body ref="mescrollRef" :up="upOptions" @down="downCallback" :down="downOptions">
		<view class="index_self">
			<view class="self_head">
				<view class="avatar" @click="skipLogin"><image :src="isLogin?(userInfo.avatar||'../../static/auth/default_avatars.png'):'../../static/auth/default_avatars.png'" mode="aspectFit"></image></view>
				<view class="user_info" @click="isLogin?'':$nav('/pagesAuth/auth/login')">
					<view class="nickname">{{isLogin?userInfo.nickname:'未登录'}}</view>
					<view class="other_info">
						<text class="money">博主很懒,暂无任何信息</text>
						<!-- <text class="integral">积分：120</text> -->
					</view>
				</view>
				<uni-icons @click="$nav('/pagesUser/setting/index')" class="setting" type="gear-filled" color="#fff" size="22"></uni-icons>
				<view class="person_info">
					<uni-grid :column="3" :showBorder="false" :highlight="false" class="money_grid" @change="$nav('/pagesUser/money/index')">
						<uni-grid-item  style="height: 150rpx;">
							<view class="money_item" style="height: 100rpx;padding:20rpx 0;">
								<view class="num">￥{{isLogin?(userInfo.money):'0.00'}}</view>
								<view>个人余额</view>
							</view>
							
						</uni-grid-item>
						<uni-grid-item style="height: 150rpx;">
							<view class="money_item" style="height: 100rpx;padding:20rpx 0;">
								<view class="num">{{isLogin?(userInfo.integral):'0.00'}}</view>
								<view>个人积分</view>
							</view>
						</uni-grid-item>
						<uni-grid-item  style="height: 150rpx;">
							<view style="height: 100rpx;padding:20rpx 0;">
								<view class="num">￥{{isLogin?(userInfo.frozen_money):'0.00'}}</view>
								<view>冻结资金</view>
							</view>
						</uni-grid-item>
						
					</uni-grid>
				</view>
			</view>
			<view class="order_type">
				<view class="item" @click="$nav('/pagesUser/order/index?order_status=-1')">
					<view class="order_icon"><image src="../../static/self_order/send2.png" mode="aspectFit" /></view>
					<view class="order_type_name">全部</view>
				</view>
				<view class="item" @click="$nav('/pagesUser/order/index?order_status=1')">
					<view class="order_icon"><image src="../../static/self_order/pay.png" mode="aspectFit" /></view>
					<view class="order_type_name">待支付</view>
				</view>
				<view class="item" @click="$nav('/pagesUser/order/index?order_status=3')">
					<view class="order_icon"><image src="../../static/self_order/send.png" mode="aspectFit" /></view>
					<view class="order_type_name">待收货</view>
				</view>
				<view class="item" @click="$nav('/pagesUser/order/index?order_status=4')">
					<view class="order_icon"><image src="../../static/self_order/comment.png" mode="aspectFit" /></view>
					<view class="order_type_name">待评论</view>
				</view>
				<view class="item" @click="$nav('/pagesUser/order/index?order_status=5')">
					<view class="order_icon"><image src="../../static/self_order/refund.png" mode="aspectFit" /></view>
					<view class="order_type_name">售后服务</view>
				</view>
			</view>
			
			<!-- <view class="integral_shop_self" @click="$nav('/pagesUser/integral/index')"> -->
			<view class="integral_shop_self" @click="$nav('/pagesUser/integral/eee')">
				<view class="title">
					<view class="name">积分商城</view>
					<view class="dec">海量商品等你来兑换</view>
				</view>
			</view>
			
			<view class="self_list">
				<uni-list :border="false">
					<uni-list-item @click="$nav('/pagesUser/money/index')" clickable qwcolor="#ff9000" :showicon="'qwicon qwpyqianbao'" title="我的钱包" :showArrow="true"></uni-list-item>
					<uni-list-item @click="$nav('/pages/user/address/index')" clickable qwcolor="#009cff" :showicon="'qwicon qwdizhi1'" title="地址管理" :showArrow="true"></uni-list-item>
					<uni-list-item @click="$nav('/pages/user/inviter/index')" clickable qwcolor="#8717f9" :showicon="'qwicon qwfenxiang'" title="分销分享" rightText="邀请好友赢积分" :showArrow="true"></uni-list-item>
					<uni-list-item @click="$nav('/pages/user/coupon/index')" clickable qwcolor="#50bc48" :showicon="'qwicon qwyouhuiquan'" title="优惠券" :showArrow="true"></uni-list-item>
					<uni-list-item @click="$nav('/pages/user/fav/index')" clickable qwcolor="#ea313b" :showicon="'qwicon qwshoucang2'" title="我的收藏" :showArrow="true"></uni-list-item>
				</uni-list>
			</view>
			<view class="self_list" style="padding-bottom: 20rpx; ">
				<uni-list :border="false">
					<uni-list-item @click="$nav('/pagesUser/setting/index')" clickable :showicon="'qwicon qwshezhi'" title="设置中心" :showArrow="true"></uni-list-item>
				</uni-list>
			</view>
		</view>
	</mescroll-body>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOptions:{
					use:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				downOptions:{
					bgColor:'linear-gradient(to left, #ef464f 0%, #ff3c46 80%)',//是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				isLogin:false,
				userInfo:undefined,
			};
		},
		onLoad() {
			uni.$on('users',()=>{
				setTimeout(()=>{
					this.checkLogin();
				},500);
				
			})
			// this.checkLogin()
		},
		methods:{
			skipLogin(){
				let obj = {...this.$api.users}
				obj.url += '/info'
				this.$http(obj).then(res=>{
					if(res.code == 200){
						this.userInfo = res.data
					}
				})
			},
			checkLogin(){
				this.$http(this.$api.checkLogin).then(res=>{
					if(res.code == 200){
						this.isLogin = true;
						this.userInfo = res.data;
					}else{
						this.isLogin = false;
						this.userInfo = undefined;
					}
					this.mescroll.endDownScroll();
				})
			},
			downCallback(){
				this.checkLogin();
			}
			
		}
	}
</script>

<style lang="scss">
.index_self{
	.self_list{
		margin-top: 20rpx;
		
	}
	.integral_shop_self{
		padding: 30rpx 30rpx;
		min-height: 100rpx;
		background-image: url();
		background-size: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;
		.title{
			.name{font-weight: bold;}
			.dec{font-size: $uni-font-size-sm;color:#aaa;margin-top: 10rpx;}
		}
	}
	.order_type{
		.order_type_name{margin-top: 20rpx;}
		.item{flex: 1;image{width: 60rpx;height: 60rpx;}}
		text-align: center;
		background: #fff;min-height: 40rpx;display: flex;margin-top: 20rpx;padding: 30rpx 30rpx;font-size: $uni-font-size-base;
	}
	.self_head{
		.person_info{clear: both;padding-top: 40rpx;}
		.money_item{
			border-right: 1px solid rgba(#fff, 0.2);
		}
		.money_grid{text-align: center;font-size: $uni-font-size-base;height: 150rpx;.num{margin-bottom: 10rpx;};box-sizing: border-box;}
		.setting{float: right;margin-top: 40rpx;margin-right: 20rpx;}
		.user_info{
			margin-top: 105rpx;float: left;margin-left: 20rpx;
			.other_info{font-size: $uni-font-size-sm;.money{margin-right: 30rpx;}}
			.nickname{margin-bottom: 10rpx;}
		}
		&:after{content:'';display: block;clear: both;}
		.avatar{margin-top: 80rpx;float: left;width: 140rpx;height: 140rpx;border-radius: 50%;background-color: #ccc;image{width: 140rpx;height: 140rpx;border-radius: 50%;}}
		background: $linear-gradient;
		padding-top: calc(var(--status-bar-height));
		min-height: 100rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		color:#fff;
	}
}
</style>
